<!--
 * @Author: your name
 * @Date: 2020-10-26 10:45:53
 * @LastEditTime: 2020-10-30 16:25:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \就业班练习d:\桌面\ma-pc\src\views\image\index.vue
-->
<template>
  <div class="image-container">
    <el-card class="box-card">
      <div slot="header">
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>素材管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 内容区 -->
      <div style="padding-bottom: 20px;">
        <el-radio-group v-model="query.collect" size="mini" @change="collectChange">
          <el-radio-button :label="false">全部</el-radio-button>
          <el-radio-button :label="true">收藏</el-radio-button>
        </el-radio-group>
        <el-button
          size="mini"
          type="success"
          @click="dialogVisible=true"
          style="float:right;"
        >上传图片素材</el-button>
        <!-- 上传图片文件的对话框  -->
        <!-- :append-to-body="true"为层级设置 -->
        <el-dialog title="提示" :append-to-body="true" :visible.sync="dialogVisible" width="600px" @close="clearSrc">
          <!--
            action：上传地址
            show-file-list:false，不需要显示已上传的文件列表
            on-success： 上传成功之后的回调函数
            before-upload: 上传之前对文件进行检测 得到的是一个布尔值 false就阻止请求
            name: 要求的上传文件参数名 key值
          -->
          <el-upload
            class="avatar-uploader"
            action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
            :headers="headers"
            :on-success="hUploadSuccess"
            name="image"
            :show-file-list="true"
            :before-upload="beforeAvatarUpload"
          >
            <!-- 如果当前有预览地址就说明图片上传成功了。 -->
            <img v-if="imgSrc" :src="imgSrc" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-dialog>

      </div>
      <!-- 素材列表 -->
      <el-row :gutter="10">
        <!-- image 是个自定义的变量   imageList是个data中的数据 -->
        <el-col
          v-for="iteam in imgData"
          :key="iteam.id"
          class="img_item"
          :xs="12"
          :sm="6"
          :md="6"
          :lg="4"
        >
          <div class="img_box">
            <img :src="iteam.url" alt />
          </div>
          <div class="option">
            <span
              class="el-icon-star-off"
              :style="{color:iteam.is_collected ? 'red': '#fff'}"
              @click="sColl(iteam)"
            ></span>
            <span class="el-icon-delete" @click="delImg(iteam.id)"></span>
          </div>
        </el-col>
      </el-row>
      <!-- /素材列表 -->
      <el-pagination
        style="margin-top:10px;"
        background
        layout="prev, pager, next"
        @current-change="pageChange"
        :page-size="query.per_page"
        :total="total_count"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getImageList, switchCollect, deleteImage } from '@/api/image'
import { getUserInfo } from '@/store'
export default {
  name: 'Images',
  data () {
    return {
      imgData: [], // 数据切换
      query: {
        // 获取素材列表
        collect: false, // 是否是收藏的图片
        page: 1, // 页数
        per_page: 18 // 每页数量
      },
      total_count: 0, // 素材总数量
      dialogVisible: false, // 是否显示弹出上传框
      imgSrc: '', // 上传图片预览的地址
      headers: {
        //   Content-Type:'multipart/form-data',
        Authorization: `Bearer ${getUserInfo().token}`
      }
    }
  },
  methods: {
    hUploadSuccess (res) { // 上传成功之后的图片地址赋值给预览区
      this.imgSrc = res.data.url
      this.$message.success('上传素材成功')
      this.getImgData()
    },
    beforeAvatarUpload (file) { // 上传前的校验
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2 // byte除1024等于kb再处于1024等于mb
      // if (!isJPG) {
      //   this.$message.error('图片只能是 JPG 格式!')
      // }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!')
      }
      // return isJPG && isLt2M // 返回布尔值
      return isLt2M // 返回布尔值
    },
    getImgData () { // 设置参数请求数据
      const parmas = { ...this.query }
      getImageList(parmas).then(res => {
        this.imgData = res.data.data.results
        this.total_count = res.data.data.total_count
        this.query.page = res.data.data.page
        this.query.per_page = res.data.data.per_page
      })
    },
    pageChange (page) { // 翻页请求新页数据
      this.query.page = page
      this.getImgData()
    },
    collectChange () { // 收藏or全部状态下的显示列表
      this.getImgData()
      this.query.page = 1
      this.$message.success('操作成功')
    },
    sColl (image) { // 素材的收藏状态切换
      switchCollect(image.id, !image.is_collected).then(res => {
        this.$message.success('操作成功')
        image.is_collected = !image.is_collected
      })
    },
    delImg (id) { // 删除素材
      deleteImage(id).then(res => {
        this.getImgData()
        this.$message.success('删除成功')
      })
    },
    clearSrc () { // 上传完成后清空预览区
      this.imgSrc = ''
    }
  },
  mounted () {
    this.getImgData()
  }
}
</script>

<style lang="less" scoped>
.img_item {
  position: relative;
  box-sizing: border-box;
  .img_box {
    height: 180px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.option {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  height: 30px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  display: flex;
  span {
    flex: 1;
    text-align: center;
    cursor: pointer;
    line-height: 30px;
  }
}

.avatar{
  max-width:500px ;
}

.avatar-uploader {
  text-align: center;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar-uploader {
  /deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
}
</style>
